<template>
  <div
    class="diy-guide"
    :style="[
      `padding:${diyItem.style.mt}px ${diyItem.style.mr}px ${diyItem.style.mb}px ${diyItem.style.ml}px `,
    ]"
  >
    <div
      :class="diyItem.style.shade == 1 ? 'style-shade' : ''"
      :style="[
        `padding:${diyItem.style.pt}px ${diyItem.style.pr}px ${diyItem.style.pb}px ${diyItem.style.pl}px `,
        `background:${
          diyItem.style.bg_status == 1 ? diyItem.style.bg : 'none'
        }`,
        `border-radius:${diyItem.style.t_radius}px ${diyItem.style.t_radius}px ${diyItem.style.b_radius}px ${diyItem.style.b_radius}px`,
      ]"
    >
      <div
        class="line"
        :style="{
          background: diyItem.style.bg_status == 1 ? diyItem.style.bg : 'none',
          borderBottomWidth: diyItem.style.lh + 'px',
          borderStyle: diyItem.layout.value,
          borderColor: diyItem.style.color,
        }"
      ></div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "storeDiyPreviewGuide",
};
</script>
<script  lang="ts" setup >
import { ref, getCurrentInstance } from "vue";
import { diyGuideDataType } from "@/types";

const props = withDefaults(
  defineProps<{
    diyItem: diyGuideDataType;
    index: number | string;
  }>(),
  {
    diyItem: () => {
      return {
        layout: {
          value: "solid",
        },
        style: {
          color: "#000000",
          lh: 1,
          bg_status: 0,
          bg: "#FFFFFF",
          shade: 0,
          mt: 0,
          mb: 0,
          ml: 0,
          mr: 0,
          pt: 0,
          pb: 0,
          pl: 0,
          pr: 0,
          t_radius: 0,
          b_radius: 0,
        },
        img: "",
        link: {},
      };
    },
    index: 0,
  }
);
</script>

<style scoped>
/*辅助线*/
.diy-guide .line {
  border: 0;

  width: 100%;
}
</style>